<div style="width: 100%;height: 100%;background-color: #222222" align="center">
    
<div style="width: 80%;height: 100%;background-color:#eeeeee" align="center" class="ui-widget ui-corner-all">
    <div style="width: 100%;height: 50px;
   padding: 0;
   border: 1px solid rgba(0,0,0,0.5);
   border-radius: 10px 10px 2px 2px;
   background: rgba(0,0,0,0.25);
   box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);"></div>
    <br><br>
    <form action="" method="post">
        <input type="hidden" name="method" value="login">
        <table style="padding: 20px;background: #6fb2e5;box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
               -o-box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
               -webkit-box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
               -moz-box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;">
            <tr><td>Username:</td><td><input type="text" name="username" id="username" value="<?php echo $username?>"></td></tr>
            <tr><td>Password:</td><td><input type="password" name="password" id="password"></td></tr>
            <tr><td colspan="2"><div id="error" style="color: red"><?php echo $error?></div></td></tr>
            <tr><td colspan="2" align="center"><input type="submit" style=" border: 1px solid #8ec1da;
                                                      background-color: #ddeef6;
                                                      border-radius: 4px;
                                                      box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
                                                      -o-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
                                                      -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
                                                      -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
                                                      color: #3985a8;
                                                      text-shadow: 0 1px #fff;
                                                      padding: 5px 30px;" value="Login"><input style=" border: 1px solid #8ec1da;
                                                      background-color: #ddeef6;
                                                      border-radius: 4px;
                                                      box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
                                                      -o-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
                                                      -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
                                                      -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
                                                      color: #3985a8;
                                                      text-shadow: 0 1px #fff;
                                                      padding: 5px 30px;"  type="reset" value="Reset"> </td></tr>
        </table>
    </form>
</div>
</div>